<template>
  <div class="pager-left-nav">
    <ul class="menu-group mt15">
      <router-link to="/itjidanci/index"  custom v-slot="{ href, navigate, isExactActive }">
        <li :class="{ active: isExactActive }">
          <a :href="href" @click="navigate">
            <Home theme="outline" size="16" :fill="isExactActive ? '#ff0040' : '#333'" />
            推荐
          </a>
        </li>
      </router-link>
    </ul>
    <ul class="menu-group border-top mt15">
      <div class="group-label">栏目分类</div>
      <router-link to="/itjidanci/roots" custom v-slot="{ href, navigate, isActive }">
        <li :class="{ active: isActive }">
          <a :href="href" @click="navigate">
            <FileWord theme="outline" size="16" :fill="isActive ? '#ff0040' : '#333'" />
            词根
          </a>
        </li>
      </router-link>
      <router-link to="/itjidanci/affixes" custom v-slot="{ href, navigate, isActive }">
        <li :class="{ active: isActive }">
          <a :href="href" @click="navigate">
            <BookOne theme="outline" size="16" :fill="isActive ? '#ff0040' : '#333'" />
            词缀
          </a>
        </li>
      </router-link>
      <router-link to="/itjidanci/columns" custom v-slot="{ href, navigate, isActive }">
        <li :class="{ active: isActive }">
          <a :href="href" @click="navigate">
            <BookOpen theme="outline" size="16" :fill="isActive ? '#ff0040' : '#333'" />
            专栏
          </a>
        </li>
      </router-link>
    </ul>
    <div class="menu-group border-top fixed-bottom">
      <div class="group-label">关于本站</div>
      <p class="about-tilte">服务条款</p>
      <p class="about-tilte">隐私政策</p>
      <img class="wechat" src="../../assets/images/wechat.jpeg" />
      <a href="https://gitee.com/itshizhan/itshizhan-cms-webfront" target="_blank">
        <Github theme="outline" size="12" fill="#333" />
        获取本站代码
      </a>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { Home, FileWord, BookOne, BookOpen, Github } from "@icon-park/vue-next";
export default defineComponent({
  name: "PageLeftNav",
  components: {
    Home,
    FileWord,
    BookOne,
    BookOpen,
    Github,
  },
});
</script>

<style lang="scss">
.pager-left-nav {
  border-right: 1px solid #f0f0f0;
  position: fixed;
  top: 60px;
  //left: 0px;
  background: #fff;
  width: 198px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;

  ul.menu-group {
    list-style: none;
    width: 198px;
    &.border-top {
      border-top: 1px solid #f0f0f0;
    }
    .group-label {
      position: relative;
      left: -5px;
      margin-bottom: 16px;
      color: #999;
      padding-left: 42px;
      font-size: 16px;
      height: 42px;
      display: flex;
      align-items: flex-end;
    }
    li {
      height: 40px;
      line-height: 40px;
      cursor: pointer;
      padding-left: 42px;
      font-size: 15px;
      a {
        color: #333;
        display: inline-block;
        width: 100%;
      }
      &.active {
        background-color: rgba(255, 20, 43, 0.04);
        a {
          color: #ff0040;
        }
      }
    }
  }
  div.fixed-bottom {
    width: 198px;
    color: #999;
    bottom: 12px;
    height: 200px;
    border-top: 1px solid #f0f0f0;
    padding-left: 42px;
    margin-top: 10px;
    p.about-tilte {
      font-size: 12px;
      height: 26px;
      line-height: 26px;
      display: inline-block;
      margin-right: 12px;
      cursor: pointer;
      text-decoration: underline;
    }
    a {
      display: block;
      font-size: 12px;
      color: #999 !important;
      margin-top: 10px;
    }
    .group-label {
      position: relative;
      left: -5px;
      margin-bottom: 12px;
      color: #999;
      font-size: 16px;
      height: 38px;
      display: flex;
      align-items: flex-end;
    }
    img.wechat {
      width: 100px;
      height: 100px;
      display: block;
      position: relative;
      left: -10px;
    }
  }
}
</style>
